ANTOOZA-FRONTEND/app/(main)/watch/[identifier]/share-menu.scss

.share-menu {
	position: relative;
	display: inline-flex;

	&__trigger {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 8px 14px;
		border-radius: 20px;
		border: 1px solid transparent;
		background: var(--bg-subtle);
		color: var(--text-primary);
		font-size: 0.875rem;
		font-weight: 600;
		cursor: pointer;
		transition: background 0.15s, color 0.15s;

		svg {
			font-size: 0.9rem;
		}

		&:hover {
			background: var(--btn-default-hover);
		}

		&[aria-expanded='true'] {
			background: var(--btn-default-hover);
		}
	}

	&__dropdown {
		position: absolute;
		top: calc(100% + 6px);
		right: 0;
		min-width: 220px;
		background: var(--bg-page);
		border: 1px solid var(--border-default);
		border-radius: 10px;
		box-shadow: 0 8px 24px var(--shadow-color);
		padding: 6px;
		z-index: 20;
		display: flex;
		flex-direction: column;
		gap: 2px;

		button {
			display: flex;
			align-items: center;
			gap: 10px;
			width: 100%;
			padding: 10px 12px;
			border: none;
			background: transparent;
			color: var(--text-primary);
			font-size: 0.875rem;
			text-align: left;
			cursor: pointer;
			border-radius: 6px;
			transition: background 0.15s;

			svg {
				width: 16px;
				text-align: center;
			}

			&:hover {
				background: var(--bg-subtle);
			}
		}
	}

	&__band {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 16px;
		height: 16px;
		border-radius: 3px;
		background: #00c73c;
		color: #fff;
		font-size: 0.7rem;
		font-weight: 700;
		line-height: 1;
	}

	@media (max-width: 480px) {
		&__dropdown {
			right: auto;
			left: 0;
		}
	}
}